import React, { useState, useEffect } from 'react';
import { Modal, Button, message, Input, Form, Image, Tooltip } from 'antd';
import { getBannerAdd, getBannerUpdate, getBannerDetail } from '../../../api/banner'
import type { BannerAddOrEditProps } from '../../../types/banner'
import UploadComponent from '../../../components/UploadComponent/index'
import { QuestionCircleOutlined } from '@ant-design/icons';

const BannerAdd: React.FC<BannerAddOrEditProps> = ({ visible, onClose, onRefresh, id }) => {
  const [localVisible, setLocalVisible] = useState(visible);
  const [title, setTitle] = useState<string>('');
  const [url, setUrl] = useState<string>('');
  const [bannername, setBannername] = useState<string>('')
  const [link, setLink] = useState<string>('')
  const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
  const [form] = Form.useForm();

  useEffect(() => {
    setLocalVisible(visible);
    if (!id) {
      setBannername('')
      setUrl('')
      setLink('')
    } else {
      getBannerDetail({
        id: id
      }).then((res: any) => {
        if (res.data.code === 200) {
          setTitle('修改轮播图')
          setBannername(res.data.data.bannername)
          setUrl(res.data.data.url)
          setLink(res.data.data.link)
          form.setFieldsValue({
            bannername: res.data.data.bannername,
            url: res.data.data.url,
            link: res.data.data.link
          });
        }
      })
    }
  }, [visible]);


  useEffect(() => {
    if (id) {
      setTitle('修改轮播图')
    } else {
      setTitle('新增轮播图')
    }
  }, [id])

  const handleOk = () => {
    try {
      setConfirmLoading(true);
      if (id) {
        getBannerUpdate({
          id: id,
          bannername,
          url,
          link
        }).then((res: any) => {
          if (res.data.code === 200) {
            message.success(res.data.message);
            setConfirmLoading(false);
            setLocalVisible(false);
            onClose();
            onRefresh(); // 调用父组件传递的回调函数
          } else {
            message.error(res.data.message);
            setConfirmLoading(false);
          }
        })
      } else {
        console.log(link);

        getBannerAdd({
          bannername,
          url,
          link
        }).then((res: any) => {
          if (res.data.code === 200) {
            message.success(res.data.message);
            setConfirmLoading(false);
            setLocalVisible(false);
            onClose();
            onRefresh(); // 调用父组件传递的回调函数
          } else {
            message.error(res.data.message);
            setConfirmLoading(false);
          }
        })
      }
    } catch (err: any) {
      message.error(err);
    }
  };

  const handleCancel = () => {
    setLocalVisible(false);
    onClose();
  };

  const handleUploadSuccess = (url: string) => {
    setUrl(url);
  };

  return (
    <div>
      <Modal title={title} open={localVisible} onOk={handleOk} onCancel={handleCancel} confirmLoading={confirmLoading} footer={
        [
          <Button key="cancel" onClick={handleCancel}>取消</Button>,
          <Button key="confirm" type="primary" onClick={handleOk} loading={confirmLoading}>确认</Button>
        ]
      }>
        <Form layout="horizontal" form={form}>
          <Form.Item label="轮播图名称" name="bannername" rules={[{ required: true, message: '请输入轮播图名称' }]}>
            <Input placeholder="请输入轮播图名称" value={bannername} onChange={(e) => setBannername(e.target.value)}></Input>
          </Form.Item>
          <Form.Item label={
            <>
            <Tooltip title="格式为'/page/index/index'">
                <QuestionCircleOutlined style={{ marginLeft: 8 }} />
              </Tooltip>
              <div style={{ marginLeft: 8 }}>链接地址</div>
            </>
          } name="link" rules={[{ required: true, message: '请输入链接地址' }]}>
            <Input placeholder="请输入链接地址" value={link} onChange={(e) => {
              console.log(e.target.value);
              setLink(e.target.value)
            }}></Input>
          </Form.Item>
          <Form.Item label="轮播图" name="url" rules={[{ required: true, message: '请上传轮播图' }]}>
            <UploadComponent
              maxCount={1}
              showUploadList={false}
              uploadUrl="/banner/upload"
              typename="file"
              onUploadSuccess={handleUploadSuccess} // 传递回调函数
            />
          </Form.Item>
          {
            url ? <Form.Item label="轮播图预览" name="url">
              <Image width={200} src={url} />
            </Form.Item> : ''
          }
        </Form>
      </Modal>
    </div>
  )
}

export default BannerAdd;